<template>
  <div class="theory-study">
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="item in tabs"
        :key="item.label"
        :label="item.label"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>
    <div class="tabs-content">
      <!-- 如果是第一个 -->
      <left-right-structure v-show="activeName == 'first'">
        <template slot="left">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
        </template>
        <template slot="right">
          <el-row style="margin: 0" :gutter="20">
            <el-col v-for="item in overviews" :key="item.label" :span="12">
              <overview-box :overview="item"></overview-box
            ></el-col>
          </el-row>
        </template>
      </left-right-structure>
      <!-- 如果是第二个 -->
      <left-right-structure v-show="activeName == 'second'">
        <div slot="left">
          <ul class="data-filter">
            <li @click="handleClick(0)">大幅进步</li>
            <li @click="handleClick(1)">大幅退步</li>
            <li @click="handleClick(2)">临界生</li>
            <li @click="handleClick(3)">波动生</li>
          </ul>
        </div>
        <template slot="right">
          <el-table border :data="tableData" style="width: 100%">
            <el-table-column
              v-for="item in tableTemplate"
              :key="item.bindKey"
              :prop="item.bindKey"
              :label="item.label"
              width="180"
            >
            </el-table-column>
          </el-table>
        </template>
      </left-right-structure>
      <!-- 如果是第三个 -->
      <knowledge-bucket
        :buckets="buckets"
        v-show="activeName == 'third'"
      ></knowledge-bucket>
      <div class="fourth-container" v-show="activeName == 'fourth'">
        <el-table border :data="processData" style="width: 100%">
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="progress" label="进度" width="180">
            <template slot-scope="scope">
              <el-progress
                :text-inside="true"
                :stroke-width="26"
                :percentage="scope.row.percentage"
              ></el-progress>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import LeftRightStructure from "@/components/LeftRightStructure.vue";
export default {
  name: "TheoryStudy",
  components: {
    LeftRightStructure: () => import("@/components/LeftRightStructure"),
    OverviewBox: () => import("@/components/OverviewBox"),
    KnowledgeBucket: () => import("@/components/KnowledgeBucket"),
    LeftRightStructure,
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      activeName: "first",
      tabs: [
        {
          label: "得分情况",
          name: "first",
        },
        {
          label: "学员关注",
          name: "second",
        },
        {
          label: "知识技能掌握情况",
          name: "third",
        },
        {
          label: "训练进度",
          name: "fourth",
        },
      ],
      processData: [
        {
          name: "test",
          percentage: 71,
        },
        {
          name: "test",
          percentage: 71,
        },
        {
          name: "test",
          percentage: 71,
        },
        {
          name: "test",
          percentage: 71,
        },
      ],
      overviews: [
        {
          label: "xxx1",
          value: "xxx",
        },
        {
          label: "xxx2",
          value: "xxx",
        },
        {
          label: "xxx34",
          value: "xxx",
        },
        {
          label: "xxx4",
          value: "xxx",
        },
        {
          label: "xxx5",
          value: "xxx",
        },
        {
          label: "xxx6",
          value: "xxx",
        },
      ],
      tableTemplate: null,
      buckets: [], //知识技能的容器
    };
  },
  methods: {
    handleClick(type) {
      console.log(type);
      // TODO:将class_id和training_id换成实际的id
      this.$http
        .get(`${this.$reqPrefix}/training/changedOrExceptional`, {
          params: {
            class_id: "1",
            training_id: "1",
            type,
          },
        })
        .then((res) => {
          console.log(res);
          const { tableTemplate, tableData } = res.data.data;
          this.tableTemplate = tableTemplate;
          this.tableData = tableData;
        });
    },
  },
  mounted() {
    this.handleClick(0);
    // this.buckets =
    // TODO:这两个id要写对
    const class_id = "";
    const training_id = "";
    // TODO:要测试
    this.$http
      .get(`${this.$reqPrefix}/training/pointsRate`, {
        params: {
          class_id,
          training_id,
        },
      })
      .then((res) => {
        this.buckets = res.data.data.buckets;
      });
    // TODO：要测试
    this.$http.get(`${this.$reqPrefix}/training/progress`).then((res) => {
      this.processData = res.data.data.tableData;
    });
  },
};
</script>

<style lang='less' scoped>
@primaryColor: #409eff;
.theory-study {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #fefefe;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  border-radius: 5px;
  box-sizing: border-box;
  .tabs-content {
    height: calc(100% - 54px);
    overflow: auto;
    .data-filter {
      list-style: none;
      padding: 0;
      width: fit-content;
      margin: 0 auto;
      li {
        width: 100px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 2px;
        margin-bottom: 10px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s linear;
        &:hover {
          border-color: @primaryColor;
          color: @primaryColor;
        }
      }
    }
  }
}
// .active{
//   border-color: @primaryColor;
//   color: @primaryColor;
// }
</style>